<template>
  <div
    class="home"
    :style="{
      'background-size': deviceSize,
      'padding-bottom': deviceBottom,
      width: deviceWidth,
      height: deviceHeight
    }"
  >
    <div class="buttonList">
      <div
        class="button"
        :style="{ 'line-height': deviceBtnHeight, height: deviceBtnHeight }"
        @click="searchStrict"
      >
        {{ strictName }}
        <img
          style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
          src="../assets/img/更多@2x.png"
        />
      </div>
      <div
        class="button"
        :style="{ 'line-height': deviceBtnHeight, height: deviceBtnHeight }"
        @click="searchCommunity"
      >
        {{ communityName }}
        <img
          style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
          src="../assets/img/更多@2x.png"
        />
      </div>
      <div
        class="button"
        :style="{ 'line-height': deviceBtnHeight, height: deviceBtnHeight }"
        @click="searchVillage"
      >
        {{ villageName }}
        <img
          style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
          src="../assets/img/更多@2x.png"
        />
      </div>

      <div
        class="button1"
        :style="{ 'line-height': deviceBtnHeight, height: deviceBtnHeight }"
      >
        <div style="width: 100%; position: relative;" @click="openAreaPopup">
          <input
            type="text"
            id="txt"
            style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#00b680; border: 0; width: 100%;  height: 100%; border-radius: 24.25px;"
            placeholder="栋"
            v-model="buildingNo"
            readonly
            maxlength="10"
          />

          <img
            style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
            src="../assets/img/更多@2x.png"
          />
        </div>

        <div style="width: 100%; position: relative;" @click="openAreaPopup1">
          <input
            type="text"
            id="txt"
            style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#00b680; border: 0; width: 100%;  height: 100%; border-radius: 24.25px;"
            placeholder="单元"
            v-model="unitNo"
            readonly
            maxlength="10"
          />

          <img
            style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
            src="../assets/img/更多@2x.png"
          />
        </div>

        <div style="width: 100%; position: relative;" @click="openAreaPopup2">
          <input
            type="text"
            id="txt"
            style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#00b680; border: 0; width: 100%; height: 100%; border-radius: 24.25px;"
            placeholder="户室"
            v-model="houseNumber"
            readonly
            maxlength="10"
          />
          <img
            style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
            src="../assets/img/更多@2x.png"
          />
        </div>
      </div>

      <span
        style="color: #00B680; position: absolute; left: 25%;"
        @click="goRegister"
        >没有我的户室信息? 去注册</span
      >

      <!-- <div
        class="button"
        :style="{ 'line-height': deviceBtnHeight, height: deviceBtnHeight }"
        @click="openAreaPopup"
      >
        <div style="width: 100%; position: relative;">
          <input
            type="text"
            id="txt"
            style="box-sizing: border-box;outline: none; background:#00b680; border: 0; width: 100%; height: 100%; border-radius: 24.25px;"
            placeholder="请选择户室"
            :disabled="true"
            :value="houseNumber"
          />
          <img
            style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
            src="../assets/img/更多@2x.png"
          />
        </div>
      </div> -->

      <div
        class="save"
        :style="{
          'margin-top': deviceMarginTop,
          height: deviceBtnHeight,
          'line-height': deviceBtnHeight,
          'border-radius': deviceSaveBorderRadius
        }"
        @click="boundBind"
      >
        立即绑定
      </div>
    </div>

    <template>
      <div class="page-search" ref="pageSearch">
        <div class="before" @click="hideToast"></div>
        <mt-search
          autofocus
          v-model="searchValue"
          @keyup.enter.native="search"
          cancel-text="取消"
        >
        </mt-search>
        <!-- 街道列表 -->
        <div style="position: absolute;top: 51px;width: 100%;" v-if="isShow">
          <mt-cell
            v-for="item of strictList"
            :key="item.id"
            :title="item.name"
            @click.native="select(item)"
          />
        </div>

        <!-- 社区列表 -->
        <div style="position: absolute;top: 51px;width: 100%;" v-if="isShow1">
          <mt-cell
            v-for="item of communityList"
            :key="item.id"
            :title="item.name"
            @click.native="select1(item)"
          />
        </div>

        <!-- 小区列表 -->
        <div style="position: absolute;top: 51px;width: 100%;" v-if="isShow2">
          <mt-cell
            v-for="item of villageList"
            :key="item.id"
            :title="item.name"
            @click.native="select2(item)"
          />
        </div>
      </div>
    </template>

    <!-- <div
      class="weui-cell weui-cell_input font-size-8"
      style="background-color: white;"
      @click="openAreaPopup"
    >
      <div class="weui-cell__hd">
        <div class="weui-label">选择地区</div>
      </div>
      <div class="weui-cell__bd">
        <input
          name="isareastart"
          class="weui-input color-black"
          :value="areaValue"
          disabled
        />
      </div>
      <div class="weui-cell__ft weui-cell__ft_in-access"></div>
    </div> -->

    <mt-popup
      v-model="areaVisible"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%;"
    >
      <mt-picker
        :slots="areaList"
        value-key="buildingNo"
        :show-toolbar="true"
        @change="selectArea"
      >
        <Slot>
          <div
            class="confirmKey flex justify-content-between font-size-9 border-box"
          >
            <div class="color-grey" @click="closePopup">取消</div>
            <div class="">{{ title }}</div>
            <div class="color-green" @click="sureArea">确定</div>
          </div>
        </Slot>
      </mt-picker>
    </mt-popup>

    <mt-popup
      v-model="areaVisible1"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%;"
    >
      <mt-picker
        :slots="areaList1"
        value-key="unitNo"
        :show-toolbar="true"
        @change="selectArea1"
      >
        <Slot>
          <div
            class="confirmKey flex justify-content-between font-size-9 border-box"
          >
            <div class="color-grey" @click="closePopup1">取消</div>
            <div class="">{{ title }}</div>
            <div class="color-green" @click="sureArea1">确定</div>
          </div>
        </Slot>
      </mt-picker>
    </mt-popup>

    <mt-popup
      v-model="areaVisible2"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%;"
    >
      <mt-picker
        :slots="areaList2"
        value-key="houseNumber"
        :show-toolbar="true"
        @change="selectArea2"
      >
        <Slot>
          <div
            class="confirmKey flex justify-content-between font-size-9 border-box"
          >
            <div class="color-grey" @click="closePopup2">取消</div>
            <div class="">{{ title }}</div>
            <div class="color-green" @click="sureArea2">确定</div>
          </div>
        </Slot>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      handler: function(e) {
        e.preventDefault();
      }, //阻止body滑动
      areaList: [
        {
          //一级   省
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        }
      ],

      areaList1: [
        {
          //一级   省
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        }
      ],
      areaList2: [
        {
          //一级   省
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        }
      ],
      flag: false, //初始时禁止picker自动加载
      areaVisible: false,
      areaVisible1: false,
      areaVisible2: false,
      // areaValue: "请选择详细户室", //页面上显示的内容
      // cityName: "", //最终选中的地区的名字
      cityCode: "", //最终选中的地区的id

      buildingNo: "",
      unitNo: "",
      houseNumber: "",

      searchValue: "", // 搜索关键字
      strictName: "请选择街道",
      strictId: "",

      communityName: "请选择社区",
      communityId: "",

      villageName: "请选择小区",
      villageId: "",

      strictList: [],
      communityList: [],
      villageList: [],
      deviceHeight: "",
      deviceWidth: "",
      deviceSize: "",
      deviceBottom: "",
      deviceMarginTop: "",

      deviceBtnHeight: "",
      deviceSaveBorderRadius: "",
      isShow: false,
      isShow1: false,
      isShow2: false,
      code: "",
      name: "",
      title: "",
      tempbuildingNo: "",
      tempunitNo: "",
      temphouseNumber: ""
    };
  },
  created() {
    // 这里要调用接口先判断绑卡信息, 如果已经绑定  , 直接显示二维码
    // alert("当前环境下的路径", this.$router);
    this.initPage();

    // this.getCode();// 作废 在main.js中实现
  },
  computed: {},
  watch: {
    areaVisible: function(newvs, oldvs) {
      if (newvs) {
        //如果areaVisible的值为true,说明弹窗出现
        this.closeTouch(); //阻止body滑动
      } else {
        //如果areaVisible的值为false，说明弹窗隐藏
        this.openTouch(); //恢复body滑动
      }
    },

    areaVisible1: function(newvs, oldvs) {
      if (newvs) {
        //如果areaVisible的值为true,说明弹窗出现
        this.closeTouch(); //阻止body滑动
      } else {
        //如果areaVisible的值为false，说明弹窗隐藏
        this.openTouch(); //恢复body滑动
      }
    },

    areaVisible2: function(newvs, oldvs) {
      if (newvs) {
        //如果areaVisible的值为true,说明弹窗出现
        this.closeTouch(); //阻止body滑动
      } else {
        //如果areaVisible的值为false，说明弹窗隐藏
        this.openTouch(); //恢复body滑动
      }
    },

    searchValue: function(newvs, oldvs) {
      console.log(newvs);
      if (newvs) {
        this.queryList = [];

        if (this.isShow) {
          // var search = this.defaultResult;
          this.findStrictList(newvs);
        }

        if (this.isShow1) {
          // var search = this.defaultResult1;
          this.findCommunityList(newvs);
        }
        if (this.isShow2) {
          // var search = this.defaultResult2;
          this.findVillageList(newvs);
        }
      }
      if (!newvs) {
        this.getGroup();
      }
    }
  },
  beforeMount: function() {},
  mounted: function() {},
  methods: {
    goRegister() {
      this.$router.push({
        path: "/register"
      });
    },
    // 选择楼栋号
    openAreaPopup() {
      console.log("openAreaPopup");
      let that = this;
      console.log(that.villageId);
      if (!that.villageId.trim()) {
        this.$toast({
          message: "请先选择小区",
          position: "middle",
          duration: 1500
        });
        return;
      }

      // 获取楼栋
      that.getBuilding(that.villageId);
    },
    // 选择单元号
    openAreaPopup1() {
      if (!this.buildingNo) {
        this.$toast({
          message: "请先选择楼栋号",
          position: "middle",
          duration: 1500
        });
        return;
      }

      this.getUnitNo(this.villageId, this.buildingNo);
    },
    // 选择户室号
    openAreaPopup2() {
      if (!this.unitNo) {
        this.$toast({
          message: "请先选择单元号",
          position: "middle",
          duration: 1500
        });
        return;
      }

      this.getRoom(this.villageId, this.buildingNo, this.unitNo);
    },
    getBuilding(villageId) {
      this.$axios
        .get("/village/household/buildingNo", {
          params: {
            villageId
          }
        })
        .then(({ data: res }) => {
          console.log("楼栋数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
            return;
          }

          if (res.data.length != 0) {
            this.areaVisible = true;
            this.flag = true;
            this.title = "请选择楼栋号";
            this.areaList[0].values = res.data;
          } else {
            this.$toast({
              message: "该小区暂未开通二维码服务, 敬请期待!",
              position: "middle",
              duration: 1500
            });
          }
        })
        .catch(() => {});
    },
    // 关闭弹窗
    closePopup() {
      let that = this;
      that.areaVisible = false;
      this.buildingNo = this.tempbuildingNo;
    },
    closePopup1() {
      let that = this;
      that.areaVisible1 = false;
      this.unitNo = this.tempunitNo;
    },
    closePopup2() {
      let that = this;
      that.areaVisible2 = false;
      this.houseNumber = this.temphouseNumber;
    },
    // 调取地区列表的函数
    area(url, params) {
      let that = this;
      //因为我们需要拿到axios请求的数据，来进行下一个axios的请求，
      //所以我们这里使用promise对象，将异步转换为同步。
      let promise = new Promise(function(resolve, reject) {
        that.$axios
          .get(url, { params })
          .then(res => {
            console.log(res);
          })
          .catch(function(error) {
            console.log(error);
          });
      });
      return promise;
    },
    selectArea2(picker, values) {
      console.log(picker, values);
      if (this.flag) {
        this.houseNumber = values[0].houseNumber;
      }
    },
    selectArea1(picker, values) {
      console.log(picker, values);
      if (this.flag) {
        this.unitNo = values[0].unitNo;
        this.houseNumber = "";
      }
    },
    // 选择地区
    selectArea(picker, values) {
      console.log(picker, values);
      let that = this;
      if (that.flag) {
        this.buildingNo = values[0].buildingNo;
        this.unitNo = "";
        this.houseNumber = "";
      }
    },
    getUnitNo(villageId, buildingNo) {
      this.$axios
        .get("/village/household/unitNo", {
          params: {
            villageId,
            buildingNo
          }
        })
        .then(({ data: res }) => {
          console.log("单元号数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
            return;
          }
          if (res.data.length != 0) {
            this.areaVisible1 = true;
            this.flag = true;
            this.title = "请选择单元号";
            this.areaList1[0].values = res.data;
          } else {
            this.$toast({
              message: "该楼栋下单元尚未开放",
              position: "middle",
              duration: 1500
            });
          }
        })
        .catch(() => {});
    },
    // 获取室
    getRoom(villageId, buildingNo, unitNo) {
      this.$axios
        .get("/village/household/houseNumber", {
          params: {
            buildingNo,
            unitNo,
            villageId
          }
        })
        .then(({ data: res }) => {
          console.log("户室数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
            return;
          }

          if (res.data.length != 0) {
            this.flag = true;
            this.title = "请选择户室号";
            this.areaVisible2 = true;
            this.areaList2[0].values = res.data;
          } else {
            this.$toast({
              message: "该单元下户室尚未开放",
              position: "middle",
              duration: 1500
            });
          }
        })
        .catch(() => {});
    },
    // 获取单元
    getUnit(buildingNo) {
      this.$axios
        .get("/village/household/unitNo", {
          params: {
            villageId: this.villageId,
            buildingNo
          }
        })
        .then(({ data: res }) => {
          console.log("单元数据", res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.areaList[2].values = res.data;
        })
        .catch(() => {});
    },
    //确定地区
    sureArea() {
      let that = this;
      that.areaVisible = false;
      console.log(this.buildingNo);
      this.tempbuildingNo = this.buildingNo;
      // this.buildingNo = "";
      this.unitNo = "";
      this.houseNumber = "";
    },
    sureArea1() {
      let that = this;
      that.areaVisible1 = false;
      this.tempunitNo = this.unitNo;
      this.houseNumber = "";
      console.log(this.tempunitNo);
    },
    sureArea2() {
      let that = this;
      that.areaVisible2 = false;
      this.temphouseNumber = this.houseNumber;
    },

    /*解决iphone页面层级相互影响滑动的问题*/
    closeTouch: function() {
      document
        .getElementsByTagName("body")[0]
        .addEventListener("touchmove", this.handler, { passive: false }); //阻止默认事件
      // console.log("closeTouch haved happened.");
    },
    openTouch: function() {
      document
        .getElementsByTagName("body")[0]
        .removeEventListener("touchmove", this.handler, { passive: false }); //打开默认事件
      // console.log("openTouch haved happened.");
    },

    findVillageList(name) {
      this.$axios
        .get("/subdistrict/page", {
          params: {
            name,
            parentId: this.communityId
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.villageList = res.data.list;
          console.log("搜索到的小区", res);
        })
        .catch(() => {});
    },
    findCommunityList(name) {
      this.$axios
        .get("/subdistrict/page", {
          params: {
            name,
            parentId: this.strictId
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.communityList = res.data.list;
          console.log("搜索到的社区", res);
        })
        .catch(() => {});
    },
    findStrictList(name) {
      this.$axios
        .get("/subdistrict/page", {
          params: {
            name,
            parentId: "0"
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.strictList = res.data.list;
          console.log("搜索到的街道", res);
        })
        .catch(() => {});
    },
    // getCode() {
    //   const code = this.getUrlParam("code");
    //   if (!code) {
    //     // 往线上跳
    //     window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd74edb5408c7d423&redirect_uri=${encodeURIComponent(
    //       "http://wx.bangning.vip"
    //     )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
    //   } else {
    //     this.code = code;
    //     if (
    //       localStorage.getItem("code") &&
    //       localStorage.getItem("code") == code
    //     ) {
    //       // 防止code 二次使用
    //       return;
    //     }
    //     localStorage.setItem("code", this.code);
    //     this.getOpenId(this.code);
    //   }

    //   // this.getOpenId("021I3aPI054zKc2MjlNI0SOdPI0I3aPY");
    // },
    // getOpenId(code) {
    //   this.$axios
    //     .get(
    //       `http://wx.bangning.vip/wx/redirect/wxd74edb5408c7d423/greet?code=${code}`,
    //       {
    //         params: {}
    //       }
    //     )
    //     .then(({ data: res }) => {
    //       console.log("获得到openId", res);
    //       if (res.code != 0) {
    //         return this.$toast({
    //           message: res.msg,
    //           position: "middle",
    //           duration: 1500
    //         });
    //       }

    //       if (typeof res.data == "string") {
    //         localStorage.setItem("openId", res.data);
    //       } else if (typeof res.data == "object") {
    //         localStorage.setItem("openId", res.data.openId);
    //         if (res.data.auditStatus == 0) {
    //           // 待审核
    //           this.$router.push({
    //             path: "/verifyprocess",
    //             query: {
    //               name: "参数~"
    //             }
    //           });
    //           return;
    //         }
    //         if (res.data.auditStatus == 1) {
    //           // 直接跳转到二维码页面
    //           this.$router.push({
    //             path: "/qrcode",
    //             query: { data: JSON.stringify(res.data) }
    //           });
    //         }
    //       }
    //     })
    //     .catch(() => {});
    // },
    // getUrlParam: function(name) {
    //   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    //   var r = window.location.search.substr(1).match(reg);
    //   if (r != null) return unescape(r[2]);
    //   return null;
    // },
    getStrictList() {
      this.isShow = true;
      this.$axios
        .get("/subdistrict/page", {
          params: {
            parentId: 0
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.strictList = res.data.list;
          console.log("街道数据", res);
        })
        .catch(() => {});
    },
    getCommunityList() {
      this.isShow1 = true;
      this.$axios
        .get("/subdistrict/page", {
          params: {
            parentId: this.strictId
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.communityList = res.data.list;
          console.log("街道数据", res);
        })
        .catch(() => {});
    },
    getVillageList() {
      this.isShow2 = true;
      this.$axios
        .get("/subdistrict/page", {
          params: {
            parentId: this.communityId
          }
        })
        .then(({ data: res }) => {
          console.log("小区数据", res);
          if (res.code != 0) {
            return;
          }
          this.villageList = res.data.list;
        })
        .catch(() => {});
    },
    initPage() {
      var _this = this;
      (function(doc, win) {
        var docEl = doc.documentElement, //根元素html
          //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            _this.deviceHeight = docEl.clientHeight + "px";
            _this.deviceWidth = docEl.clientWidth + "px";
            _this.deviceSize = _this.deviceWidth + " " + _this.deviceHeight;
            _this.deviceBottom = _this.$scaleHeight(36);
            _this.deviceMarginTop = _this.$scaleHeight(51);

            _this.deviceBtnHeight = _this.$scaleHeight(48.5);

            _this.deviceSaveBorderRadius =
              parseInt(_this.deviceBtnHeight) / 2 + "px";
          };

        // 切换手机改变尺寸时执行
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        doc.addEventListener("DOMContentLoaded", recalc, false); // 绑定浏览器缩放与加载时间

        //  刷新手机时执行
        _this.deviceHeight = docEl.clientHeight + "px";
        _this.deviceWidth = docEl.clientWidth + "px";
        _this.deviceSize = _this.deviceWidth + " " + _this.deviceHeight;
        _this.deviceBottom = _this.$scaleHeight(36);
        _this.deviceMarginTop = _this.$scaleHeight(51);

        _this.deviceBtnHeight = _this.$scaleHeight(48.5);

        _this.deviceSaveBorderRadius =
          parseInt(_this.deviceBtnHeight) / 2 + "px";
      })(document, window);
    },

    searchStrict() {
      this.isShow1 = false;

      this.isShow2 = false;
      this.$refs.pageSearch.style.display = "block";
      this.searchValue = "";
      // 获取街道数据
      this.getStrictList();
    },
    searchCommunity() {
      if (!this.strictId) {
        return this.$toast({
          message: "请先选择街道",
          position: "middle",
          duration: 1500
        });
      }
      this.isShow = false;
      this.isShow2 = false;
      this.$refs.pageSearch.style.display = "block";
      this.searchValue = "";
      // 获取社区数据
      this.getCommunityList();
    },
    searchVillage() {
      if (!this.communityId) {
        return this.$toast({
          message: "请先选择社区",
          position: "middle",
          duration: 1500
        });
      }
      this.isShow = false;
      this.isShow1 = false;
      this.$refs.pageSearch.style.display = "block";
      this.searchValue = "";
      //  获取小区数据
      this.getVillageList();
    },

    // 回车触发
    search() {
      let values = this.searchValue;
      console.log(values);
    },
    select(item) {
      console.log(item);
      this.searchValue = item.name;
      this.strictName = item.name;

      this.strictId = item.id;
      setTimeout(() => {
        this.$refs.pageSearch.style.display = "none";
        this.communityName = "请选择社区";
        this.villageName = "请选择小区";
        this.buildingNo = "";
        this.unitNo = "";
        this.houseNumber = "";
      }, 400);
    },

    select1(item) {
      this.searchValue = item.name;
      this.communityName = item.name;

      this.communityId = item.id;

      setTimeout(() => {
        this.$refs.pageSearch.style.display = "none";
        this.villageName = "请选择小区";
        this.buildingNo = "";
        this.unitNo = "";
        this.houseNumber = "";
      }, 400);
    },

    select2(item) {
      this.searchValue = item.name;
      this.villageName = item.name;
      this.villageId = item.id;

      setTimeout(() => {
        this.$refs.pageSearch.style.display = "none";
        this.buildingNo = "";
        this.unitNo = "";
        this.houseNumber = "";
      }, 400);
    },
    getGroup() {
      if (this.isShow) {
        this.getStrictList();
      }

      if (this.isShow1) {
        this.getCommunityList();
      }

      if (this.isShow2) {
        this.getVillageList();
      }
    },
    hideToast() {
      this.$refs.pageSearch.style.display = "none";
    },
    // 立即绑定
    boundBind() {
      // // 防止code被使用两次
      // this.code = undefined;

      if (this.strictName == "请选择街道") {
        return this.$toast({
          message: "请选择街道",
          position: "middle",
          duration: 1500
        });
      }

      if (this.communityName == "请选择社区") {
        return this.$toast({
          message: "请选择社区",
          position: "middle",
          duration: 1500
        });
      }

      if (this.villageName == "请选择小区") {
        return this.$toast({
          message: "请选择小区",
          position: "middle",
          duration: 1500
        });
      }
      if (!this.buildingNo.trim()) {
        return this.$toast({
          message: "请选择楼栋号",
          position: "middle",
          duration: 1500
        });
      }

      if (!this.unitNo.trim()) {
        return this.$toast({
          message: "请选择单元号",
          position: "middle",
          duration: 1500
        });
      }

      if (!this.houseNumber.trim()) {
        return this.$toast({
          message: "请选择户室号",
          position: "middle",
          duration: 1500
        });
      }

      this.$axios
        .get("/village/household/list", {
          params: {
            villageName: this.villageName,
            buildingNo: this.buildingNo,
            unitNo: this.unitNo,
            houseNumber: this.houseNumber,
            villageId: this.villageId
          }
        })
        .then(({ data: res }) => {
          console.log("绑定后数据", res);

          if (res.code != 0 && !res.data) {
            // 流程1 注册流程
            return this.$router.push({
              name: "bindcard",
              params: {
                villageName: this.villageName,
                buildingNo: this.buildingNo,
                unitNo: this.unitNo,
                houseNumber: this.houseNumber
              }
            });
          }

          // 流程2 查询流程
          this.$router.push({
            path: "/mycard",
            query: {
              data: res.data[0],
              strictName: this.strictName,
              communityName: this.communityName
            }
          });

          this.strictName = "请选择街道";
          this.communityName = "请选择社区";
          this.villageName = "请选择小区";
          this.buildingNo = "";
          this.unitNo = "";
          this.houseNumber = "";
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
#txt {
  font-size: 17px;
  color: #fff;
  padding: 0;
}
#txt::-webkit-input-placeholder {
  color: #fff;
  font-size: 17px;
}
.page-search {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
}
.before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 52px;
}

.home {
  background: url("../assets/img/图层4@2x.png") no-repeat;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.button {
  width: 100%;
  border-radius: 24.25px;
  background-color: #00b680;
  margin-bottom: 10px;
  text-align: left;
  color: #fff;
  padding-left: 22.5px;
  padding-right: 20.5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 17px;
  position: relative;
}

.button1 {
  width: 100%;
  border-radius: 24.25px;
  // background-color: #00b680;
  margin-bottom: 10px;
  text-align: left;
  color: #fff;
  // padding-left: 22.5px;
  // padding-right: 20.5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 17px;
  position: relative;
}
/* .button > span {
  font-size: 18px;
} */
.save {
  width: 100%;
  /* border-radius: 24.25px; */

  color: #fff;
  padding-left: 22.5px;
  padding-right: 20.5px;
  box-sizing: border-box;
  text-align: center;
  background-color: #ffe400;
  font-weight: bold;
  font-size: 23.33px;
  text-shadow: 2px 2px 20px #ff0000;
}
.buttonList {
  padding: 0 20px 0 20px;
  box-sizing: border-box;
  // text-align: center;
}

.button > span {
}
.mint-header {
  background: #fff;
  color: #666;
  font-size: 16px;
}

.mint-popup {
  width: 100%;
}

.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  background: #f5f5f5;
}

.usi-btn-cancel,
.usi-btn-sure {
  color: #108ee9;
}

.flex {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
</style>
